<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CDN for Font Awesome 6 Pro</title>

    <meta content="public" https-equiv="Cache-Control" />
    <meta content="text/javascript" https-equiv="Content-Script-Type" />
    <meta content="text/css" https-equiv="Content-Style-Type" />
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <meta charset="UTF-8" />
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" />
    <meta content="#0069d9" name="theme-color" />
    <meta content="#0069d9" name="msapplication-navbutton-color" />
    <meta content="#0069d9" name="apple-mobile-web-app-status-bar-style" />
    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
    <meta content="389228291770881" property="fb:app_id" />
    <meta content="Hưng Hoàng Văn" name="Author" />
    <meta content="vi_VN" property="og:locale" />

    <link rel="icon" href="images/favicon.ico" />
    <link rel="icon" href="images/icon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link href="css/main.css" rel="stylesheet" type="text/css" />

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
      type="text/javascript"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js"
      type="text/javascript"
    ></script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </head>

  <body class="bg-light">
    <div class="container-fluid px-md-5">
      <div class="github-buttons text-right mt-4">
        <a
          class="github-button"
          href="https://github.com/hung1001"
          data-show-count="true"
          aria-label="Follow @hung1001 on GitHub"
          >Follow @hung1001</a
        >
        <a
          class="github-button"
          href="https://github.com/hung1001/font-awesome-pro-v6"
          data-icon="octicon-star"
          data-show-count="true"
          aria-label="Star hung1001/font-awesome-pro-v6 on GitHub"
          >Star</a
        >
        <a
          class="github-button"
          href="https://github.com/hung1001/font-awesome-pro-v6/subscription"
          data-icon="octicon-eye"
          data-show-count="true"
          aria-label="Watch hung1001/font-awesome-pro-v6 on GitHub"
          >Watch</a
        >
      </div>

      <h3 class="text-center mt-3 mb-4 pb-1">
        <i class="far fa-sm fa-clock"></i>
        <span>Last updated version:</span> <span class="ver badge badge-info"></span>
      </h3>

      <div class="row list-versions mb-3 justify-content-end">
        <div class="col-sm-4 col-xl-auto">
          <div class="d-flex">
            <h6 class="mr-2">
              <i class="far fa-code"></i>
              <span class="text">Minified versions:</span>
            </h6>
            <div class="custom-control custom-switch">
              <input type="checkbox" class="custom-control-input" id="minified" checked />
              <label class="custom-control-label" for="minified"></label>
            </div>
          </div>
        </div>
        <div class="col-sm-4 col-xl-2">
          <h6><i class="fad fa-code-merge"></i> Select versions</h6>
          <div class="position-relative">
            <select id="list-versions" class="js-select2"></select>
          </div>
        </div>
        <div class="col-sm-4 col-xl-2 mt-3 mt-sm-0">
          <h6><i class="fad fa-download"></i> Download</h6>
          <div class="position-relative">
            <select id="archive" class="js-select2" data-placeholder="Select version">
              <option value=""></option>
            </select>
          </div>
        </div>
      </div>

      <div class="mb-3">
        <h5>Via JsDelivr</h5>
        <div class="form-row">
          <div class="col-md-11 mb-3 mb-md-0">
            <input id="a" class="form-control" readonly="readonly" />
          </div>
          <div class="col-md-1">
            <button class="btn btn-primary btn-block text-uppercase" id="b">
              <i class="fal fa-sm fa-copy"></i> copy
            </button>
          </div>
        </div>
      </div>

      <div class="mb-3">
        <h5>Via Staticaly</h5>
        <div class="form-row">
          <div class="col-md-11 mb-3 mb-md-0">
            <input id="c" class="form-control" readonly="readonly" />
          </div>
          <div class="col-md-1">
            <button class="btn btn-primary btn-block text-uppercase" id="d">
              <i class="fal fa-sm fa-copy"></i> copy
            </button>
          </div>
        </div>
      </div>

      <div class="mb-3">
        <h5>Via Raw Githack</h5>
        <div class="form-row">
          <div class="col-md-11 mb-3 mb-md-0">
            <input id="e" class="form-control" readonly="readonly" />
          </div>
          <div class="col-md-1">
            <button class="btn btn-primary btn-block text-uppercase" id="f">
              <i class="fal fa-sm fa-copy"></i> copy
            </button>
          </div>
        </div>
      </div>

      <hr class="my-4" />

      <div class="row mb-3">
        <div class="col-md-4 text-center">
          <h4>Sizing icons</h4>
          <p>
            <span class="d-block mb-2">Solid icon with class <b>.fa</b></span>
            <i class="fa fa-3x fa-airplay"></i>
          </p>
          <p>
            <span class="d-block mb-2">Solid icon with class <b>.fas</b></span>
            <i class="fas fa-3x fa-airplay"></i>
          </p>
          <p>
            <span class="d-block mb-2">Regular icon with class <b>.far</b></span>
            <i class="far fa-3x fa-airplay"></i>
          </p>
          <p>
            <span class="d-block mb-2">Brands icon with class <b>.fab</b></span>
            <i class="fab fa-3x fa-apple"></i>
          </p>
          <p>
            <span class="d-block mb-2">Light icon with class <b>.fal</b> (not free)</span>
            <i class="fal fa-3x fa-airplay"></i>
          </p>
          <p>
            <span class="d-block mb-2">Thin icon with class <b>.fat</b> (not free)</span>
            <i class="fat fa-3x fa-airplay"></i>
          </p>
          <p>
            <span class="d-block mb-2">Duotone icon with class <b>.fad</b> (not free)</span>
            <i class="fad fa-3x fa-airplay"></i>
          </p>
        </div>

        <div class="col-md-4 text-center">
          <h4>New class name</h4>
          <p>
            <span class="d-block mb-2">Solid icon with class <b>.fa-solid</b></span>
            <i class="fa-solid fa-3x fa-airplay"></i>
          </p>
          <p>
            <span class="d-block mb-2">Regular icon with class <b>.fa-regular</b></span>
            <i class="fa-regular fa-3x fa-airplay"></i>
          </p>
          <p>
            <span class="d-block mb-2">Brands icon with class <b>.fa-brands</b></span>
            <i class="fa-brands fa-3x fa-apple"></i>
          </p>
          <p>
            <span class="d-block mb-2">Light icon with class <b>.fa-light</b> (not free)</span>
            <i class="fa-light fa-3x fa-airplay"></i>
          </p>
          <p>
            <span class="d-block mb-2">Thin icon with class <b>.fa-thin</b> (not free)</span>
            <i class="fa-thin fa-3x fa-airplay"></i>
          </p>
          <p>
            <span class="d-block mb-2">Duotone icon with class <b>.fa-duotone</b> (not free)</span>
            <i class="fa-duotone fa-3x fa-airplay"></i>
          </p>
        </div>

        <div class="col-md-4 text-center">
          <h4>Rotating icons</h4>
          <p>
            <span class="d-block mb-2">Solid icon with class <b>.fa</b></span>
            <i class="fa fa-3x fa-snowboarding"></i>
          </p>
          <p>
            <span class="d-block mb-2">Solid icon with class <b>.fas</b></span>
            <i class="fas fa-3x fa-snowboarding fa-rotate-90"></i>
          </p>
          <p>
            <span class="d-block mb-2">Regular icon with class <b>.far</b></span>
            <i class="far fa-3x fa-snowboarding fa-rotate-180"></i>
          </p>
          <p>
            <span class="d-block mb-2">Light icon with class <b>.fal</b> (not free)</span>
            <i class="fal fa-3x fa-snowboarding fa-rotate-270"></i>
          </p>
          <p>
            <span class="d-block mb-2">Thin icon with class <b>.fat</b> (not free)</span>
            <i class="fat fa-3x fa-snowboarding fa-flip-horizontal"></i>
          </p>
          <p>
            <span class="d-block mb-2">Duotone icon with class <b>.fad</b> (not free)</span>
            <i class="fad fa-3x fa-snowboarding fa-flip-vertical"></i>
          </p>
        </div>
      </div>

      <hr />

      <div class="mb-5 duotone">
        <h5 class="mb-3">
          Duotone - new style in version <span class="text-danger">5.10.0 and greater</span>
        </h5>

        <div class="row">
          <div class="col-md-4 text-center">
            <h6>Changing Opacity</h6>
            <div class="fa-3x">
              <i class="fad fa-bus-alt" style="--fa-secondary-opacity: 0.2"></i>
              <!--  secondary layer"s opacity set to 20% -->
              <i class="fad fa-bus-alt" style="--fa-secondary-opacity: 0.4"></i>
              <!--  secondary layer"s opacity set to 40% -->
              <i class="fad fa-bus-alt" style="--fa-secondary-opacity: 0.6"></i>
              <!--  secondary layer"s opacity set to 60% -->
              <i class="fad fa-bus-alt" style="--fa-secondary-opacity: 0.8"></i>
              <!--  secondary layer"s opacity set to 80% -->
              <i class="fad fa-bus-alt" style="--fa-secondary-opacity: 1"></i>
              <!--  secondary layer"s opacity set to 100% -->
            </div>
          </div>

          <div class="col-md-4 text-center">
            <h6>Swapping Layer Opacity</h6>
            <div class="fa-3x">
              <i class="fad fa-camera"></i>
              <!-- a duotone style camera icon -->
              <i class="fad fa-camera fa-swap-opacity"></i>
              <!-- a duotone style camera icon with swapped opacity -->

              <i class="fad fa-fire-alt"></i>
              <!-- a duotone style fire-alt icon -->
              <i class="fad fa-fire-alt fa-swap-opacity"></i>
              <!-- a duotone style fire-alt icon with swapped opacity -->

              <i class="fad fa-bus-alt"></i>
              <!-- a duotone style bus-alt icon -->
              <i class="fad fa-bus-alt fa-swap-opacity"></i>
              <!-- a duotone style bus-alt icon with swapped opacity -->
            </div>
          </div>

          <div class="col-md-4 text-center">
            <h6>Swapping Layer Opacity</h6>
            <div class="fa-3x">
              <i class="fad fa-bus-alt" style="--fa-primary-color: gold"></i>
              <!-- primary layer color defined -->
              <i class="fad fa-bus-alt" style="--fa-primary-color: orangered"></i>
              <!-- primary layer color defined -->

              <i class="fad fa-fill-drip" style="--fa-secondary-color: limegreen"></i>
              <!-- secondary layer color defined -->
              <i class="fad fa-fill-drip" style="--fa-secondary-color: rebeccapurple"></i>
              <!-- secondary layer color defined -->

              <i
                class="fad fa-battery-full"
                style="--fa-primary-color: limegreen; --fa-secondary-color: dimgray"
              ></i>
              <!-- secondary + primary layer color defined -->
              <i
                class="fad fa-battery-quarter"
                style="--fa-primary-color: orange; --fa-secondary-color: dimgray"
              ></i>
              <!-- secondary + primary layer color defined -->
            </div>
          </div>
        </div>
      </div>

      <div id="disqus_thread"></div>
      <script>
        (function () {
          var d = document,
            s = d.createElement('script');
          s.src = 'https://fa-v6-hung1001.disqus.com/embed.js';
          s.setAttribute('data-timestamp', +new Date());
          (d.head || d.body).appendChild(s);
        })();
      </script>

      <div class="copyright text-center border-bottom border-top py-3">
        Pro Sources FREE &amp; CDN by <a href="https://www.fb.com/hung.hoangvan.1001">Hung1001</a>
      </div>
    </div>

    <a href="https://hung1001.github.io/font-awesome-pro" class="h-link">v5</a>

    <script src="js/main.js"></script>
    <script id="dsq-count-scr" src="https://fa-v6-hung1001.disqus.com/count.js" async></script>
  </body>
</html>
